<template>
  <div class="app-container">
    <el-form inline label-width="70px" size="small" class="query-form">
      <el-form-item label="服务名">
        <el-input clearable v-model="listQuery.appName" />
      </el-form-item>
      <el-form-item label="状态">
        <el-select clearable v-model="listQuery.status" placeholder="请选择">
          <el-option
            v-for="item in statusList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="租户">
        <el-input clearable v-model="listQuery.tenantId" />
      </el-form-item>
      <el-form-item label="开始时间">
        <el-date-picker
          v-model="listQuery.startTime"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间">
        <el-date-picker
          v-model="listQuery.endTime"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="限制数">
        <input-number clearable v-model="listQuery.limitNum"></input-number>
      </el-form-item>
      <el-form-item label-width="0">
        <el-button type="primary" @click="queryTableData" size="small">查询</el-button>
      </el-form-item>
    </el-form>
    <dynamic-table
      ref="table"
      v-loading="listLoading"
      size="small"
      :data="list"
      border
      fit
      style="width: 100%;"
      :columns="columns"
      :page-options='pageOptions'
      :load-method='getTableData'
    ></dynamic-table>
    <comm-dialog
      ref="dialog"
      component="CallChainDetail"
    >
    </comm-dialog>
  </div>
</template>
<script>
import DynamicTable from '@/components/DynamicTable'
import {getCallChainLogList} from '@/api/log-trace'
import {SERVER_REQ_STATUS} from '@/enume/status'
import CommDialog from './components/CommDialog'
import InputNumber from '@/components/form/InputNumber'
export default {
  name: 'CallChain',
  components: { DynamicTable, CommDialog, InputNumber },
  data() {
    let self = this
    return {
      statusList: SERVER_REQ_STATUS,
      listQuery: {
        appName: '',
        status: '',
        startTime: '',
        endTime: '',
        limitNum: '',
        tenantId: ''
      },
      list: [],
      listLoading: false,
      pageOptions: {
        isShowPage: true
      },
      columns: [[
        {
          prop: 'url',
          headerAlign: 'center',
          label: '请求',
          minWdth: '200',
          body(scope) {
            return {
              component: 'TypeButton',
              bind: {
                name: scope.row.url,
                type: 'text',
                size: 'small'
              },
              on: {
                click() {
                  self.$router.push({
                    path: '/log-trace/call-chain-detail',
                    query: {
                      topTraceId: scope.row.topTraceId,
                      url: encodeURIComponent(scope.row.url)
                    }
                  })
                  // self.openDetailDialog({
                  //   query: {
                  //     topTraceId: scope.row.topTraceId,
                  //     url: scope.row.url
                  //   }
                  // })
                }
              }
            }
          }
        },
        {
          prop: 'occurTime',
          label: '发生时间',
          width: '120',
          format: 'date'
        },
        {
          prop: 'tenantId',
          label: '租户',
          width: '80'
        },
        {
          prop: 'ip',
          label: '来源',
          width: '100'
        },
        {
          prop: 'appName',
          label: '服务节点',
          width: '150'
        },
        {
          prop: 'tags',
          label: '状态',
          width: '60',
          align: 'center',
          body(scope) {
            let obj = SERVER_REQ_STATUS.filter(el => el.value === scope.row.tags)[0] || {}
            return {
              component: 'TypeTag',
              bind: {
                type: obj.style,
                size: 'small',
                name: obj.label
              }
            }
          }
        },
        {
          prop: 'duration',
          label: '耗时(ms)',
          width: '70'
        }
      ]]
    }
  },
  methods: {
    /**
     * 获取表格数据
     */
    async getTableData(param) {
      let params = {
        ...this.listQuery,
        pageNum: param.currentPage,
        pageSize: param.pageSize
      }
      // console.log(param)
      let {data} = await getCallChainLogList(params)
      this.list = data.list || []
      return data
    },
    /**
     * 查询
     */
    queryTableData() {
      this.$refs.table.queryPageData()
    },
    openDetailDialog(param) { // 打开sql明细弹框
      this.$refs.dialog.open({
        dialog: {
          title: '调用链详情',
          width: '85%'
        },
        component: param
      })
    }
  },
  mounted() {
  }
}
</script>
<style lang="scss" scoped>

</style>
